<template>
  <div class="zz">
    <div class="title">
         <i class="el-icon-s-promotion"></i><span>房地产详情</span>
    </div>
    <div class="box">
    <div class="header">
<span>{{formData.title}}</span>
    </div>
    <div class="main">
        <div class="left">
 <img :src="formData.image">
        </div>
        <div class="right">
            <div class="shang">
               <div class="aa">
                 <div class="one"><img :src="formData.photos[0]" alt=""></div>
                <div class="two"><img :src="formData.photos[1]" alt=""></div>
                <div class="three"><img :src="formData.photos[2]" alt=""></div>
                <div class="four"><img :src="formData.photos[3]" alt=""></div>
               </div>
               <div class="bb"><span>{{formData.price}}元</span></div>
            </div>
            <div class="xia"><img :src="formData.agent.image" alt=""></div>
        </div>
    </div>
    <div class="footer">
<span>{{formData.desc}}</span>
        </div>
  </div>
  </div>
</template>
<script>
import { getDetail } from '@/api/detail'

export default {
  data () {
    return {
      formData: [],
      id: this.$route.params.id
    }
  },
  created () {
    this.getDetails()
    // console.log(this.id)
  },
  methods: {
    async getDetails () {
      const res = await getDetail(this.id)
      console.log('指定房产详情', res.data)
      this.formData = res.data
    }

  }
}
</script>

<style lang="scss" scoped >

.zz{
 width: 1200px;
   margin: 0 auto;

   .title{
    height: 50px;
    font-size: 30px;
    color: orange;
    text-align: left;
   }
}
.box{
    border: 1px solid skyblue;
    border-radius: 5px;
}
  /* 头部样式 */
  .header {
    height: 50px;
    // background-color: rgb(88, 204, 113);
    font-size: 30px;
    text-align: left;

  }

  /* 主区域 */
  .main {
    display: flex;
    justify-content: center;
    padding-bottom:  10px; ;
     .left{
    width: 700px;
    height: 700px;
    background: skyblue;
    line-height: 700px;
    margin-right: 15px;

  }
  .right{
    width: 500px;
    height: 700px;
    display: flex;
    justify-content: center;
    flex-direction: column;
.shang{
    height: 405px;
    // flex: 1;
    // background: red;
    display: flex;
    // justify-content: center;
    flex-direction: column;
.aa{
    width: 315px;
    // background: pink;
    margin: 0 96px;
        .one,.three{
 float: left;
 margin-bottom: 15px;
        width: 150px;
        height: 150px;
        background: palevioletred;
    }
    .two,.four{
         float: right;
 margin-bottom: 15px;
        width: 150px;
        height: 150px;
        background: palevioletred;
    }

}
  .bb{
        width: 100%;
        text-align: center;
        // background: peru;
        font-size: 30px;
        margin-top:  10px; ;
        span{
          color: rgb(236, 100, 46);
        }
    }
}
.xia{
    flex: 1;
// background: palegreen;
    margin: 9px 108px;
    width: 300px;
    height: 300px;

}
  }
  }
  img{
    width: 100%;
    height: 100%;
    vertical-align:middle
  }

  .footer{
    height: 150px;
    border-top: none;
    font-size: 15px;
    border-top: 1px solid #000;
    padding-top: 10px ;
      background: url('@/assets/Artic Sunset.png') no-repeat center;
  }
  .two,.four{
    margin-right:0 ;
  }
</style>
